<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>
  <title></title>
  <link rel="stylesheet" href="css/animate.min.css" />
   <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/index.css" />

    <script src="js/jquery.js"></script>
  <script type="text/javascript" src="js/swiper.min.js" ></script>
  <script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
    <script src="js/rem.js"></script>
</head>
<body>

<!--<audio loop src="rank.mp3" id="audio" autoplay="" preload="auto"></audio>-->
<!--<div class="music"><img class="music-img ro" src="images/music.png"><div class="music-p"><img src="images/music.gif"></div></div>-->

<!--<div class="wrap">-->
  <!--<div class="swiper-container">-->
    <!--<div class="swiper-wrapper">-->
      <!--<div class="swiper-slide">-->
        <!--<div class="page_01">-->
          <!--<div class="top">-->
              <!--<span class="back"></span>-->
              <!--<h3>借阅排行</h3>-->
          <!--</div>-->
            <!--<div class="center">-->


            <!--</div>-->


          <!--</div>-->
          <!--<div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1s"></div>-->
        <!--</div>-->
      <!--</div>-->

   <!--</div>-->
<!--</div>-->


<div class="swiper-container swiper-container-v">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Vertical Slide 1</div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-h">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Horizontal Slide  1</div>
                    <div class="swiper-slide">Horizontal Slide  2</div>
                    <div class="swiper-slide">Horizontal Slide  3</div>
                    <div class="swiper-slide">Horizontal Slide  4</div>
                    <div class="swiper-slide">Horizontal Slide  5</div>
                </div>
                <div class="swiper-pagination swiper-pagination-h"></div>
            </div>
        </div>
        <div class="swiper-slide">Vertical Slide 3</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-v"></div>
</div>
</body>
<script type="text/javascript">

    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });
    var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });

</script>
</html>
